<template>
    <div class="footer_bar_link">
        <div
            class="footer_bar"
            v-for="(item,index) in FooterBarList"
            :key="index"
        >
                <router-link 
                :to="item.path"
                >
                    <IconFont
                        :name="item.ims"
                    />
                    {{item.text}}
                </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name:'FooterBar',
        components:{
        },
        data() {
            return {
                FooterBarList:[
                    {
                        text:'首页',
                        ims:'home',
                        path:'/home'
                    },
                    {
                        text:'分类',
                        ims:'classfy',
                        path:'/classfy'
                    },
                    {
                        text:'购物车',
                        ims:'car',
                        path:'/car'
                    },
                    {
                        text:'我的',
                        ims:'Mine',
                        path:'/mine'
                    },
                ]
            }
        },
    }
</script>

<style lang="scss" scoped>
.footer_bar_link{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-around;
    background: #eee;
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    .footer_bar{
        padding-top: 5px;
    }
}

</style>